<template>
  <div class="news-main-content" >
    <div class="news-list clearfix" v-for="(item,index)
     in news">
      <div class="news-list-lt">
        <router-link to="/news/details?id=13"><img alt="" v-bind:src="img[index]" v-on:error="noimg($event)" refs="" ></router-link>
      </div>
      <div class="news-list-ct">
        <router-link to="/news/details?id=13">
          <p style="color: rgb(200, 200, 200);">27</p>
          <p style="color: rgb(200, 200, 200);">2018.06</p>
        </router-link>
      </div>
      <div class="news-list-rt">
        <p>
          <router-link to="/news/details?id=13" style="color: rgb(102, 102, 102);">{{item.title}}</router-link>
        </p>
        <p>
          <router-link to="/news/details?id=13" style="color: rgb(153, 153, 153);">{{item.desc | ellipsis}}</router-link>
        </p>
        <span style="border: 1px solid rgb(153, 153, 153); background: transparent;"><router-link to="/news/details?id=13" style="color: rgb(102, 102, 102);">阅读全文</router-link></span>
      </div>
    </div>

    <div class="news-page">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="20"
          :page-size="4"
          @current-change="changedata"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'down',
  data () {
    return {
      news: [],
      img: []
    }
  },
  created: function () {
    let that = this
    that.$axios.get('http://route.showapi.com/109-35', {
      params: {
        showapi_sign: 'beb9f96dc9eb46af957830933230ee9f',
        showapi_appid: '81551',
        needAllList: '0',
        channelId: '5572a108b3cdc86cf39001d1',
        channelName: '互联网焦点'
      }
    }).then(function (response) {
      that.news = response.data.showapi_res_body.pagebean.contentlist
      that.news = that.news.slice(0, 4)
      that.img.splice(0, that.img.length)
      for (var i = 0; i < that.news.length; i++) {
        if (that.news[i].imageurls.length == 0) {
          that.img.push('../../static/about/no-data.jpg')
        } else {
          that.img.push(that.news[i].imageurls[0].url)
        }
      }
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods: {
    changedata: function (val) {
      let that = this
      that.$axios.get('http://route.showapi.com/109-35', {
        params: {
          showapi_sign: 'beb9f96dc9eb46af957830933230ee9f',
          showapi_appid: '81551',
          needAllList: '0',
          channelId: '5572a108b3cdc86cf39001d1',
          channelName: '互联网焦点'
        }
      }).then(function (response) {
        that.news = response.data.showapi_res_body.pagebean.contentlist
        that.news = that.news.slice((val * 4 - 4), (val * 4))
        that.img.splice(0, that.img.length)
        for (var i = 0; i < that.news.length; i++) {
          if (that.news[i].imageurls.length == 0) {
            that.img.push('../../static/about/no-data.jpg')
          } else {
            that.img.push(that.news[i].imageurls[0].url)
          }
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    noimg: function (event) {
      event.target.src = '../../static/about/no-data.jpg'
    }
  },
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 90) {
        return value.slice(0, 90) + '...'
      }
      return value
    }
  }
}
</script>

<style scoped lang="less">
  .news-main-content{
    padding: 89px 100px 73px 100px;
    background: #fff;
    .news-list{
      padding-bottom: 25px;
      border-bottom: 1px solid #eeeeee;
      padding-top: 25px;
      overflow: hidden;
      .news-list-lt{
        width: 280px;
        height: 170px;
        border-radius: 5px 5px;
        overflow: hidden;
        float: left;
        a{
          img{
            max-width: 100%;
          }
        }
      }
      .news-list-ct{
        float: left;
        width: 115px;
        text-align: center;
        border-right: 1px solid #c8c8c8;
        height: 170px;
        a{
          p{
            &:first-child{
              font-size: 54px;
              color: #c8c8c8;
              font-family: "Impact";
            }
            &:nth-child(2){
              font-size: 14px;
              color: #c8c8c8;
              font-family: "Microsoft Yahei";
              font-weight: bold;
            }
          }
        }
      }
      .news-list-rt{
        overflow: hidden;
        padding-left: 13px;
        height: 170px;
        padding-top: 13px;
        p{
          &:first-child{
            font-size: 16px;
            font-family: "Microsoft Yahei";
            font-weight: bold;
            margin-bottom: 14px;
          }
          &:nth-child(2){
            font-size: 12px;
            font-family: "Microsoft Yahei";
            margin-bottom: 37px;
          }
        }
        span{
          padding: 12px 42px;
          border: 1px solid #999;
        }
      }
    }
    .news-page{
      text-align: center;
      margin-top: 40px;
    }
  }
</style>